<template>
	<view class="box">
		<view class="title">反馈类型</view>
		<view class="list">
			<view v-for="(item, index) in items" :key="index" :class="{ active: item.isActive }"
				@click="toggleActive(index)">
				{{ item.text }}
			</view>
		</view>

		<view class="" v-if="textType==1">
			<view class="title1">反馈问题</view>
			<view class="uni-list">
				<checkbox-group @change="checkboxChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="item in opinion" :key="item">
						<view class="items">
							<view>{{item}}</view>
							<checkbox />
						</view>

					</label>
				</checkbox-group>
			</view>
		</view>

		<view>
			<view class="title1">反馈内容</view>
			<view class="uni-input1" cursor="0" style="margin-top: 10px;">
				<input class="input1" />
			</view>

			<view class="sumbit" @click="sumbitButton">
				提交反馈
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const textarea = ref('')
	const flag = ref(true)

	const textType = ref(2);
	// 初始数据
	const items = ref([{
			text: '推荐',
			isActive: false,
			type: 1,
			id: 1
		},
		{
			text: '消息',
			isActive: false,
			type: 2,
			id: 0
		},
		{
			text: '社区',
			isActive: false,
			type: 1,
			id: 2
		},
		{
			text: '广告',
			isActive: false,
			type: 2,
			id: 0
		},
		{
			text: '搜索',
			isActive: false,
			type: 1,
			id: 3
		},
		{
			text: '个人主页',
			isActive: false,
			type: 2,
			id: 0
		},
		{
			text: '其他',
			isActive: false,
			type: 2,
			id: 0
		},
	]);
	const opinion = ref([])

	const opinion1 = ref([
		'内容和自己不相关', '内容老旧', '内容不丰富', '吐槽或负面内容'
	])
	const opinion2 = ref([
		'内容质量差', '内容老旧', '内容太久', '吐槽或负面内容'
	])
	const opinion3 = ref([
		'内容太久', '搜索结果不相关', '内容质量差', '内容不丰富'
	])

	// 切换激活状态
	const toggleActive = (index) => {
		items.value.forEach((item, i) => {
			item.isActive = i === index;

		});
		textType.value = items.value[index].type;
		const optionId = items.value[index].id
		if (optionId == 1) {
			opinion.value = opinion1.value
		} else if (optionId == 2) {
			opinion.value = opinion2.value
		} else if (optionId == 3) {
			opinion.value = opinion3.value
		}
	};

	const sumbitButton = () => {
		uni.showToast({
			title: "提交成功",
		})
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/user/user',
			});
		}, 500)


	}
</script>

<style lang="scss" scoped>
	.box {
		width: 90%;
		margin: 0 auto;
	}

	.title {
		margin-top: 10px;
		font-size: 15px;
		font-weight: bold;
	}

	.title1 {
		font-size: 15px;
		font-weight: bold;
		margin-top: 10px;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 20rpx; // 间距
		padding: 30rpx;
	}

	.list>view {
		flex: 1 0 30%; // 每个子项占据至少 30% 宽度
		max-width: 30%; // 最大宽度限制
		text-align: center;
		padding: 10rpx;
		border: 1px solid #ccc; // 边框样式
		transition: all 0.3s ease; // 过渡效果

		&.active {
			border-color: green; // 选中时边框颜色变为绿色
			color: green; // 选中时字体颜色变为绿色
		}
	}

	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ccc;
		height: 40px;
	}

	.sumbit {
		width: 100%;
		height: 50px;
		background-color: #00aa7f;
		color: white;
		font-size: 30xp;
		text-align: center;
		line-height: 50px;
		border-radius: 100px;
		font-weight: bold;

		position: fixed;
		bottom: 0;
		/* 固定在底部 */
		left: 50%;
		/* 左侧居中 */
		transform: translateX(-50%);
		/* 水平居中 */



		z-index: 1000;
		/* 确保在其他元素之上 */
	}

	.uni-input1 {
		margin-left: 15px;
		width: 80vw;
		height: 10vh;
		border: 1px solid #000;
		position: relative;
		.input1{
		
		}
	}
</style>